<template>
  <div v-if="loading" style="text-align: center;padding: 50px;">
    <a-spin></a-spin>
  </div>
  <entity-view
    v-else
    :model="acctInfo"
    :rules="rules"
    ref="form"
  >
    <form-item label="账户类型" v-model="acctInfo.settleAcctType" prop="settleAcctType" input-type="select" :options="[
    {value:'00',name:'本行借记账户'},
    {value:'01',name: '本行贷记账户'},
    {value:'02',name: '本行存折'},
    {value:'03',name: '本行内部户'},
    {value:'10',name: '他行借记账户'},
    {value:'11',name: '他行贷记账户'},
    {value:'12',name: '他行存折'},
    {value:'13',name: '他行内部户'}]" ></form-item>
    <form-item label="结算账号" v-model="acctInfo.settleAcctNo" prop="settleAcctNo"  @change="(value) => handleChange(value, 'settleAcctNo')"></form-item>
    <form-item label="账户名称" v-model="acctInfo.settleAcctName" prop="settleAcctName"  ></form-item>
    <form-item label="开户行行号" v-model="acctInfo.settleAcctBankNo" prop="settleAcctBankNo" @change="bankNoChange" input-type="select" :options="bankNameCodeList" show-search  @search="bankNameCodeQuerySelect2List" ></form-item>
    <form-item label="开户行名称" v-model="acctInfo.settleAcctBankName" prop="settleAcctBankName" disabled></form-item>
    <form-item><br></form-item>

    <form-item label="结算账号正面/开户证明文件" v-model="acctInfo.acctImageInfo" prop="acctImageInfo">
      <a-upload list-type="picture-card"
                :show-upload-list="false"
                :data="{'isup':1}"
                :before-upload="beforeUpload"
                :customRequest="certImgUpload"
      >
        <div v-if="this.imageLocalPathUrl !== ''">
          <img :src="this.imageLocalPathUrl" width="100px" height="100px">
          <a-tooltip placement="bottom">
            <template slot="title">
              <span>查看大图</span>
            </template>
            <a-icon :type="'eye'" theme="twoTone" twoToneColor="#4a9ff5" @click="viewImg"/>
          </a-tooltip>
          <a-tooltip placement="bottom">
            <template slot="title">
              <span>清除图片</span>
            </template>
            <a-icon :type="'delete'" theme="twoTone" twoToneColor="#4a9ff5" @click="delImg" />
          </a-tooltip>
        </div>
        <div v-if="this.imageLocalPathUrl === ''">
          <a-icon :type="'plus'"/>
          <div class="ant-upload-text">上传</div>
        </div>
      </a-upload>
    </form-item>
    <form-item label="资金管理关系证明照">
      <a-upload list-type="picture-card"
                :show-upload-list="false"
                :data="{'isup':1}"
                :before-upload="beforeUpload"
                :customRequest="certZjImgUpload"
      >
        <div v-if="this.imageLocalPathzjUrl !== ''">
          <img :src="this.imageLocalPathzjUrl" width="100px" height="100px">
          <a-tooltip placement="bottom">
            <template slot="title">
              <span>查看大图</span>
            </template>
            <a-icon :type="'eye'" theme="twoTone" twoToneColor="#4a9ff5" @click="viewZjImg"/>
          </a-tooltip>
          <a-tooltip placement="bottom">
            <template slot="title">
              <span>清除图片</span>
            </template>
            <a-icon :type="'delete'" theme="twoTone" twoToneColor="#4a9ff5" @click="delZjImg" />
          </a-tooltip>
        </div>
        <div v-if="this.imageLocalPathzjUrl === ''">
          <a-icon :type="'plus'"/>
          <div class="ant-upload-text">上传</div>
        </div>
      </a-upload>
    </form-item>
    <a-modal :maskClosable="false" :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="this.imageUrl" />
    </a-modal>
  </entity-view>
</template>
<script>
import EntityView from "../../../../components/common/entityView/EntityView.vue";
import FormItem from "../../../../components/common/entityView/FormItem.vue";

export default {
  name: "SettleAcctInfo",
  components: {
    EntityView,
    FormItem,
  },
  props: {
    query: Object,
  },
  data: function () {

    return {
      instId: "",
      mchntNo: "",
      acctCfg: "",
      acctInfo: {
        settleImagelist:[
        ],
        acctImageInfo:{},
      },
      rules: {
        settleAcctType: [{required: true, message: '必选', trigger: 'blur'}],
        settleAcctNo: [{required: true, message: '必填', trigger: 'blur'}],
        settleAcctName: [{required: true, message: '必填', trigger: 'blur'}],
        settleAcctBankNo: [{required: true, message: '必填', trigger: 'blur'}],
        acctImageInfo: [{required: true, message: '请上传结算账号正面/开户证明文件', trigger: 'blur'}],
      },
      bankNameCodeList: [],
      loading:false,
      previewVisible:false,
      imageUrl:"",
      imageLocalPathUrl:"",
      imageLocalPathzjUrl:"",
    }
  },
  methods: {
    handleChange(value,param) {
      this.acctInfo[param] = value;
    },
    bankNoChange(value) {
      this.$set(this.acctInfo, 'settleAcctBankName', (this.bankNameCodeList.filter(i => {
        return i.id === value
      }))[0].name.split("-")[1])
    },
    resetFields() {
      return this.$refs.form.resetFields();
    },
    async setBeanInfo({...acctInfo},mchntNo,instId,acctCfg,fundType) {
      this.acctInfo = acctInfo;
      this.acctInfo.fundType=fundType;
      this.acctInfo.baseProdCode="*";
      this.instId = instId;
      this.mchntNo = mchntNo;
      this.acctCfg = acctCfg;
      this.loading = true
      if(typeof this.acctInfo.settleImagelist !== 'undefined'){
        this.acctInfo.settleImagelist.forEach(item => {
          if(item.imageType === '30' || item.imageType === '31'){
            this.$set(this.acctInfo,'acctImageInfo',item);
            this.getImg(item.imageLocalPath,item.id)
          }
          if(item.imageType === '05'){
            this.getZjImg(item.imageLocalPath,item.id)
          }
        });
      }else{
        this.acctInfo.settleImagelist = [
          {
            imageLocalPath:"",
          },
          {
            imageLocalPath:"",
          },
        ]
      }
      this.bankNameCodeQuerySelect2List()
      this.resetFields()
      this.loading = false
    },
    async bankNameCodeQuerySelect2List (value = '') {
      this.bankNameCodeList = [];
      const res = await this.$get('/admin/mcmp/bMchntBaseInfo/bankNameCodeQuerySelect2List',{q: encodeURIComponent(value + '&' + this.instId )})
      this.bankNameCodeList = res.data.results.map(i => {
        i.name = i.id + ' - ' + i.name
        i.value = i.id
        return i
      })
    },

    /**
     * 上传结算账号正面/开户证明文件
     * @param action
     * @param file
     * @param onSuccess
     * @param onError
     * @param onProgress
     * @returns {Promise<boolean>}
     */
    async certImgUpload({action, file, onSuccess, onError, onProgress}) {
      const formData = new FormData();
      formData.append('imgFile', file);
      formData.append('imageType', '00');
      formData.append('instId', this.instId);
      formData.append('mchntNo', this.mchntNo);
      const res = await this.$upload(
        "/admin/mcmp/bMchntImageInfo/uploadBomp",formData
      );
      if (res.data.code === "100000") {
        this.acctInfo.settleImagelist[0].imageLocalPath = res.data.data.imageLocalPath;
        if(this.acctCfg==="settle"){
          this.acctInfo.settleImagelist[0].imageType = "30";
          this.acctInfo.settleImagelist[0].imageIndex = "0";
        }else {
          this.acctInfo.settleImagelist[0].imageType = "31";
          this.acctInfo.settleImagelist[0].imageIndex = "0";
        }
        this.$set(this.acctInfo,'acctImageInfo',this.acctInfo.settleImagelist[0]);
        this.imageLocalPathUrl = res.data.data.imageData;
        this.$message.success("上传成功！");
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
    },

    /**
     * 上传资金管理关系证明照
     * @param action
     * @param file
     * @param onSuccess
     * @param onError
     * @param onProgress
     * @returns {Promise<boolean>}
     */
    async certZjImgUpload({action, file, onSuccess, onError, onProgress}) {
      const formData = new FormData();
      formData.append('imgFile', file);
      formData.append('imageType', "00");
      formData.append('instId', this.instId);
      formData.append('mchntNo', this.mchntNo);
      const res = await this.$upload(
        "/admin/mcmp/bMchntImageInfo/uploadBomp",formData
      );
      if (res.data.code === "100000") {
        this.acctInfo.settleImagelist[1].imageLocalPath = res.data.data.imageLocalPath;
        if(this.acctCfg==="settle"){
          this.acctInfo.settleImagelist[1].imageType = "05";
          this.acctInfo.settleImagelist[1].imageIndex = "0";
        }else {
          this.acctInfo.settleImagelist[1].imageType = "05";
          this.acctInfo.settleImagelist[1].imageIndex = "1";
        }
        this.imageLocalPathzjUrl = res.data.data.imageData;
        this.$message.success("上传成功！");
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
    },
    async getImg(imageLocalPath,id){
      const params = {
        imageLocalPath: imageLocalPath,
        imgId: id,
        imageType: '00',
        instId: this.instId,
      };
      const res = await this.$get(
        "/admin/mcmp/bMchntImageInfo/getBompImg",params
      );
      if (res.data.code === "100000") {
        this.imageLocalPathUrl = res.data.data.imageData;
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
    },
    async getZjImg(imageLocalPath,id){
      const params = {
        imageLocalPath: imageLocalPath,
        imgId: id,
        imageType: "00",
        instId: this.instId,
      };
      const res = await this.$get(
        "/admin/mcmp/bMchntImageInfo/getBompImg",params
      );
      if (res.data.code === "100000") {
        this.imageLocalPathzjUrl = res.data.data.imageData;
        return true;
      } else {
        this.$message.error(res.data.data.respDesc);
        return false;
      }
    },
    viewImg(e) {
      this.imageUrl = this.imageLocalPathUrl;
      this.previewVisible = true;
      e.stopPropagation();
    },
    viewZjImg(e) {
      this.imageUrl = this.imageLocalPathzjUrl;
      this.previewVisible = true;
      e.stopPropagation();
    },
    delImg(e) {
      this.imageLocalPathUrl = "";
      this.acctInfo.settleImagelist[0].imageLocalPath = "";
      this.$set(this.acctInfo,'acctImageInfo',null);
      e.stopPropagation();
    },
    delZjImg(e) {
      this.imageLocalPathzjUrl = "";
      this.acctInfo.settleImagelist[1].imageLocalPath = ""
      e.stopPropagation();
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/bmp'
      if (!isJPG) {
        this.$message.error('请上传图片文件');
      }
      return isJPG;
    },
    handleCancel() {
      this.previewVisible = false;
    },

  },
};
</script>

<style scoped>
</style>
